<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>线索列表</title>
    <link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            padding: 6px 16px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 20px
        }

        .layui-table-cell {
            height: auto;
        }

        .container {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
        }

        .notification {
            display: inline-block;
            animation: scroll-left 15s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="demo">
    <!--  <ul class="layui-tab-title">-->
    <!--    <li class="layui-this">演示说明</li>-->
    <!--    <li>日期</li>-->
    <!--    <li>分页</li>-->
    <!--    <li>上传</li>-->
    <!--    <li>滑块</li>-->
    <!--  </ul>-->
    <ul class="layui-nav" lay-bar="disabled">

        <li class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="__STATIC__/layui/images/shop.png" class="layui-nav-img"></a>
            <dl class="layui-nav-child">
                <!--        <dd style="text-align: center;color: #0A0B11">{$info.mer_desc}</dd>-->
                <dd style="text-align: center;"><a href="javascript:;" id="cpwd">修改密码</a></dd>
                <dd style="text-align: center;"><a href="javascript:;" id="cphone">修改联系电话</a></dd>
                <!--        <dd><a href="javascript:;">横线隔断</a></dd>-->
                <!--        <hr>-->
                <dd style="text-align: center;"><a id="loginOut">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="">账号：{$info.username}</a>
        </li>
        <li class="layui-nav-item">
            <a href="">联系电话：{$info.phone}</a>
        </li>
        <li class="layui-nav-item">
            <a href="">商户名称：{$info.mer_name}</a>
        </li>


    </ul>

    <fieldset class="table-search-fieldset" style="border-color: #1e9fff">
<!--        <legend>搜索信息</legend>-->
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="background-color: #99D3FF">称呼</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="background-color: #99D3FF">电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="background-color: #99D3FF">产品</label>
                        <div class="layui-input-inline">
                            <div class="layui-input-inline">
                                <select name="pro_id">
                                    <option value="">全部</option>
                                    {volist name="products" id="vo"}
                                    <option value="{$key}">{$vo}</option>
                                    {/volist}
                                </select>

                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="background-color: #99D3FF">城市</label>
                        <div class="layui-input-inline">
                            <input type="text" name="cityname" autocomplete="off" class="layui-input"
                                   placeholder="请输入城市">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="background-color: #99D3FF">时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="test10" placeholder=" ">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn" id="search"><i class="layui-icon layui-icon-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
    <!--  <blockquote class="layui-elem-quote layui-hide layui-text" id="footer">-->
    <!--    {$Think.session.uname} 线索列表-->
    <!--  </blockquote>-->
    <!--  <p class="layui-elem-quote">其实就是自定义了个“|”的分隔符，然后最后一项也可以点。</p>-->
    <!--  <div class="layui-tab-content">-->

    <!--    <div class="layui-tab-item layui-show">-->
    <!--      <div class="layui-carousel" id="test1">-->
    <!--        <div carousel-item>-->
    <!--          <div><p class="demo-carousel">{$Think.session.uname} 线索列表</p></div>-->
    <!--          &lt;!&ndash;          <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>&ndash;&gt;-->
    <!--          &lt;!&ndash;          <div><p class="layui-bg-green demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>&ndash;&gt;-->
    <!--          &lt;!&ndash;          <div><p class="layui-bg-blue demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>&ndash;&gt;-->
    <!--          &lt;!&ndash;          <div><p class="demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>&ndash;&gt;-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="layui-tab-item">-->
    <!--      <div id="laydateDemo"></div>-->
    <!--    </div>-->
    <!--    <div class="layui-tab-item">-->
    <!--      <div id="pageDemo"></div>-->
    <!--    </div>-->
    <!--    <div class="layui-tab-item">-->
    <!--      <div class="layui-upload-drag" id="uploadDemo">-->
    <!--        <i class="layui-icon"></i>-->
    <!--        <p>点击上传，或将文件拖拽到此处</p>-->
    <!--        <div class="layui-hide" id="uploadDemoView">-->
    <!--          <hr>-->
    <!--          <img src="" alt="上传成功后渲染" style="max-width: 100%">-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="layui-tab-item">-->
    <!--      <div id="sliderDemo" style="margin: 52px 18px;"></div>-->
    <!--    </div>-->
    <!--  </div>-->
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="tplInfo2">
    {{#  layui.each(d.remark_data, function(index, item){ }}
    <p>
        <span style="margin-right: 10px">{{ item }}</span>
    </p>

    {{#  }); }}
</script>

<script type="text/html" id="tplInfo">
    {{#  layui.each(d.progress, function(index, item){ }}
    <p>
        <span>{{ item.create_time }}：</span>
        <span style="margin-right: 10px">{{ item.content }}</span>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs"
                style="float: right;position:absolute;right: 1px" lay-active="le_del" data-id="{{ item.id }}"
                data-cid="{{ d.id }}">删除
        </button>
    </p>

    {{#  }); }}
</script>

<script type="text/html" id="dataTpl">
    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add" id=""> 添加跟进</button>
    <!--    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>-->
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>


<script src="__STATIC__/layui/layui.js"></script>
<script>
    layui.use(function () {
        // 得到需要的内置组件
        var layer = layui.layer; //弹层
        var laypage = layui.laypage; //分页
        var laydate = layui.laydate; //日期
        var table = layui.table; //表格
        var carousel = layui.carousel; //轮播
        var upload = layui.upload; //上传
        var element = layui.element; //元素操作
        var slider = layui.slider; //滑块
        var dropdown = layui.dropdown; //下拉菜单
        var $ = layui.jquery;
        var util = layui.util;

        util.event('lay-active', {
            le_del: function (othis) {
                id = othis.context.dataset.id;
                cid = othis.context.dataset.cid;
                console.log(othis.context.dataset)
                layer.confirm('确认要删除吗？', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: "{:url('index/delProgress')}",
                        dataType: 'json',
                        data: {id: id, cid: cid},
                        success: function (data) {
                            if (data.code == 200) {
                                $(othis).parent("p").remove();
                                layer.msg('删除成功!', {icon: 1, time: 2000});

                            } else {
                                layer.msg(data.msg, {icon: 2, time: 2000});
                            }

                        },
                        error: function (data) {
                            layer.msg('网络错误,稍后再试...', {icon: 2, time: 2000});
                        }
                    });
                });
            }
        });


        //日期时间范围
        laydate.render({
            elem: '#test10'
            , type: 'datetime'
            , range: true
        });

        // $('#cpwd').on('click', function () {
        //     layer.prompt({
        //         title: '修改密码',
        //         formType: 2
        //     }, function (text, index) {
        //         $.ajax({
        //             type: "post",
        //             url: "{:url('subIndex/saveProgress')}",
        //             data: {
        //                 content: text
        //             },
        //             dataType: 'json',
        //             success: function (data) {
        //                 layer.close(index);
        //                 if (data.code == 400) {
        //                     layer.msg(data.msg, {
        //                         time: 1200,
        //                         icon: 0,
        //                     });
        //                 } else if (data.code == 200) {
        //                     layer.msg(data.msg, {
        //                         time: 1200,
        //                         icon: 1,
        //                         end: function () {
        //                             window.location.reload(true);
        //                         }
        //                     });
        //                 }
        //             }
        //         });
        //     });
        // });


        $('#cpwd').on('click', function () {
            layer.prompt({
                title: '修改密码',
                formType: 2
            }, function (text, index) {
                $.ajax({
                    type: "post",
                    url: "{:url('subIndex/changePwd')}",
                    data: {
                        pwd: text
                    },
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.code == 400) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 0,
                            });
                        } else if (data.code == 200) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 1,
                                end: function () {
                                    window.location.reload(true);
                                }
                            });
                        }
                    }
                });
            });
        });

        $('#cphone').on('click', function () {
            layer.prompt({
                title: '修改联系电话',
                formType: 2
            }, function (text, index) {
                $.ajax({
                    type: "post",
                    url: "{:url('subIndex/changePhone')}",
                    data: {
                        phone: text
                    },
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.code == 400) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 0,
                            });
                        } else if (data.code == 200) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 1,
                                end: function () {
                                    window.location.reload(true);
                                }
                            });
                        }
                    }
                });
            });
        });


        $('#loginOut').on('click', function () {
            $.ajax({
                type: "get",
                url: "{:url('Login/subLoginOut')}",
                success: function (jsonData) {
                    if (jsonData.code == 200) {
                        layer.msg('退出成功！', {
                            icon: 1,
                        });
                        location.href = "{:url('Login/subLogin')}";
                    } else {
                        layer.msg('退出失败', {
                            icon: 2,
                        });
                    }
                }
            });
        });

        $('#search').on('click', function () {
            var username = $('[name="username"]').val();
            var phone = $('[name="phone"]').val();
            var stime = $('#test10').val();
            var pro_id = $('[name="pro_id"]').val();
            var cityname = $('[name="cityname"]').val();

            // 重载 - 这里以搜索为例
            table.reload('tableOne', {
                where: { //设定异步数据接口的额外参数，任意设
                    clue_name: username
                    , phone: phone
                    , times: stime
                    , pro_id: pro_id
                    , cityname: cityname
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false

        });


        // Tab 切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        // 执行一个 table 实例
        table.render({
                elem: '#demo'
                , id: 'tableOne'
                , url: "{:url('subIndex/lists')}" //数据接口（此处为静态数据，仅作演示）
                , title: '线索表'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count',] //自定义分页布局
                ,theme: '#1E9FFF'
                //,curr: 5 //设定初始在第 5 页
                ,groups: 8 //只显示 1 个连续页码
                ,first: '首页'
                ,last: '尾页'
                ,prev: '<em>上一页</em>'
                ,next: '<em>下一页</em>'
            }
                , limit: 10
                , toolbar: true  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                , defaultToolbar: ['filter']
                , totalRow: true //开启合计行
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                    , countName: 'total' //规定数据总数的字段名称，默认：count
                }
                , cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 120, sort: true, fixed: 'left'}
                    , {field: 'channel_name', title: '渠道', width: 120}
                    , {field: 'pro_name', title: '产品', width: 150}
                    , {field: 'clue_name', title: '称呼', width: 120}
                    , {field: 'phone', width: 150, title: '电话'}
                    // ,{field: 'gender', title: '性别', width:100, sort: true}
                    , {field: 'city', title: '城市', width: 150}

                    , {field: 'apply_limit', title: '申请金额', width: 200}
                    , {field: 'content', title: '线索信息', width: 400, templet: '#tplInfo2'}
                    // ,{field: 'content', title: '更多信息', width:200}
                    // ,{field: 'progress', title: '跟进信息', width:300}
                    // ,{field: 'price', title: '费用', width: 150, sort: true}
                    , {field: 'create_time', title: '时间', width: 200}
                    // , {field: 'progress', title: '跟进记录', width: 400, templet: '#tplInfo'}
                    // , {templet: '#dataTpl', width: 200, align: 'center', title: '操作'}
                ]],
                done: function (res, curr, count) {
                    $(".layui-table-main tr").each(function (index, val) {
                        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                }
            }
        );

        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
            ;
        });

        // 单元格工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'more') {
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    , show: true //外部事件触发即显示
                    , data: [{
                        title: '编辑'
                        , id: 'edit'
                    }, {
                        title: '删除'
                        , id: 'del'
                    }]
                    , click: function (menudata) {
                        if (menudata.id === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                        } else if (menudata.id === 'edit') {
                            layer.msg('编辑操作，当前行 ID:' + data.id);
                        }
                    }
                    , align: 'right' //右对齐弹出
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            } else if (layEvent === 'add') {
                // layer.open({
                //     type: 2
                //     ,title: '订单发货'
                //     ,content: '{:url("order.order/delivery")}?id='+data.id
                //     ,area: ['90%', '90%']
                //     ,yes: function(index, layero){
                //
                //     }
                // })
                var cid = data.id;
                layer.prompt({
                    title: '跟着记录内容',
                    formType: 2
                }, function (text, index) {
                    $.ajax({
                        type: "post",
                        url: "{:url('index/saveProgress')}",
                        data: {
                            content: text,
                            cid: cid
                        },
                        dataType: 'json',
                        success: function (data) {
                            layer.close(index);
                            if (data.code == 400) {
                                layer.msg(data.msg, {
                                    time: 1200,
                                    icon: 0,
                                });
                            } else if (data.code == 200) {
                                layer.msg(data.msg, {
                                    time: 1200,
                                    icon: 1,
                                    end: function () {
                                        window.location.reload(true);
                                    }
                                });
                            }
                        }
                    });
                });
            }
        });


        // 分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 1000 //数据总数
            , limit: 10 //每页显示的数据条数
            , skin: '#1E9FFF' //自定义选中色值
            //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });

        // 滑块
        var sliderInst = slider.render({
            elem: '#sliderDemo'
            , input: true //输入框
        });

    });
</script>
</body>
</html>
